<template>
  <div class="center-cmp">
    <div class="cc-header">
      <dv-decoration-1 style="width:200px;height:50px;" />
      <div>系统在线概览</div>
      <dv-decoration-1 style="width:200px;height:50px;" />
    </div>

    <div class="cc-details">
      <div >在线人数</div>
      <div v-for="(item,index) in xy" :key="index" class="card">{{item}}</div>
    </div>
    <div class="cc-main-container">
    <div ref="tree" class="ccmc-middle"></div>
  </div>
  </div>
</template>

<script>

export default {
  name: 'CenterCmp',
  components: {
  },
  data () {
    return {
      xy: ''
    }
  },
  mounted () {
    this.init()
    this.loadData()
    this.timer = setInterval(this.loadData, 1000 * 60 * 10)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    loadData: function () {
      var labledata = []
      this.$axios.get('http://172.18.29.15:8000/metric/es_aggregation')
        .then(res => {
          this.esvalues = res.data.data
          res.data.data.filter(item => {
            labledata.push(item.name)
            if (item.name === '小易系统') {
              this.xy = item.value.toString()
            }
          })
        })
        .catch(function (res) {
          console.log(res)
        })
    },
    init: function () {
      this.tree = this.$echarts.init(this.$refs.tree)
      var data = {
        name: '小易系统',
        children: [{
          name: '后端',
          children: [{
            name: 'xy-base',
            value: 0
          }, {
            name: 'xy-call',
            value: 1
          }, {
            name: 'xy-call',
            value: 1
          }, {
            name: 'xy-call',
            value: 1
          }, {
            name: 'xy-call',
            value: 1
          }, {
            name: 'xy-call',
            value: 1
          }, {
            name: 'xy-call',
            value: 1
          }, {
            name: 'xy-call',
            value: 1
          }, {
            name: 'xy-call',
            value: 1
          }, {
            name: 'xy-call',
            value: 1
          }, {
            name: 'xy-call',
            value: 1
          }, {
            name: 'xy-call',
            value: 1
          }, {
            name: 'xy-call',
            value: 1
          }]
        }, {
          name: '中台',
          children: [{
            name: 'od-order',
            value: 1
          }, {
            name: 'od-order',
            value: 1
          }, {
            name: 'od-order',
            value: 1
          }, {
            name: 'od-order',
            value: 1
          }, {
            name: 'od-order',
            value: 1
          }, {
            name: 'od-order',
            value: 1
          }, {
            name: 'od-order',
            value: 1
          }, {
            name: 'od-order',
            value: 1
          }, {
            name: 'od-order',
            value: 1
          }, {
            name: 'od-order',
            value: 1
          }, {
            name: 'od-order',
            value: 1
          }, {
            name: 'od-order',
            value: 1
          }]
        }]
      }
      let option
      option = {
        tooltip: {
          trigger: 'item'
        },
        series: [{
          layout: 'emptyCircle',
          data: [data],
          top: '6%',
          bottom: '30%',
          orient: 'vertical',
          expandAndCollapse: true,
          type: 'tree',
          edgeShape: 'curve', // curve 和 polyline
          symbol: 'emptyCircle', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none',
          initialTreeDepth: 30,
          itemStyle: {
            color: '#3f53d2',
            borderWidth: 1.5
          },
          lineStyle: {
            color: '#a5a5c4',
            width: 1.5,
            curveness: 0.4
          },
          label: {
            backgroundColor: '#06f339',
            position: 'top',
            verticalAlign: 'middle',
            align: 'center',
            fontSize: 14,
            borderWidth: 1.5,
            show: true,
            color: '#fff'
          },
          leaves: {
            label: {
              normal: {
                position: 'bottom',
                verticalAlign: 'middle',
                rotate: -90,
                align: 'left',
                fontSize: 14,
                show: true,
                color: '#fff',
                rich: {
                  oneone: {
                    fontSize: 18,
                    fontFamily: 'Microsoft YaHei',
                    borderColor: '#37d917',
                    borderRadius: 4
                  }
                },
                formatter: (name) => {
                  if (name.data.value === 0) {
                    console.log(name.data.name)
                    return '{oneone|' + name.data.name + '}'
                  }
                }
              }
            }
          },
          emphasis: {
            focus: 'ancestor',
            blurScope: 'coordinateSystem'
          }
        }]
      }
      this.tree.setOption(option)
    }
  }
}
</script>

<style lang="less">
.center-cmp {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;

  .cc-header {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 30px;
  }

  .cc-details {
    height: 120px;
    display: flex;
    justify-content: center;
    font-size: 32px;
    align-items: center;

    .card {
      background-color: rgba(4,49,128,.6);
      color: #08e5ff;
      height: 70px;
      width: 70px;
      font-size: 45px;
      font-weight: bold;
      line-height: 70px;
      text-align: center;
      margin: 10px;
    }
  }

  .cc-main-container {
    position: relative;
    flex: 1;
    display: flex;

    .ccmc-middle {
      width: 100%;
      height: 100%;

      .active-ring-name {
        font-size: 20px !important;
      }
    }

    .ccmc-left, .ccmc-right {
      width: 25%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 24px;

      span {
        font-size: 40px;
        font-weight: bold;
      }

      .station-info {
        height: 80px;
        display: flex;
        align-items: center;
      }
    }

    .ccmc-left {
      align-items: flex-end;

      span {
        margin-left: 20px;
      }
    }

    .ccmc-right {
      align-items: flex-start;

      span {
        margin-right: 20px;
      }
    }
  }

  .label-tag {
    position: absolute;
    width: 500px;
    height: 30px;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
